<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>JpetStore</title>
    <link rel="stylesheet" href="../css/jpetstore.css" type="text/css"/>
    <link rel="stylesheet" href="../css/jquery-ui.css" type="text/css"/>
    <script th:src = "@{/JS/jquery-3.2.1.js}"></script>
    <script th:src = "@{/JS/jquery-ui.js}"></script>
</head>
<body>
    <div th:replace="/common/header.html"></div>
    <div id="Content">
        <div id="BackLink">
            <a href="/catalog/main">Return to Main Menu</a>
        </div>

        <div id="Catalog">

            <div id="Cart">

                <h2>Shopping Cart</h2>
                <table id="cartTable">
                    <tr>
                        <th><b>Item ID</b></th>
                        <th><b>Product ID</b></th>
                        <th><b>Description</b></th>
                        <th><b>In Stock?</b></th>
                        <th><b>Quantity</b></th>
                        <th><b>List Price</b></th>
                        <th><b>Total Cost</b></th>
                        <th>&nbsp;</th>
                    </tr>

                    <tr th:if="${session.loginAccount == null || session.loginAccount.getCart() == null}">
                        <td colspan="8"><b>Your cart is empty.</b></td>
                    </tr>

                    <div th:if="${cart ne null && session.loginAccount ne null}">
                    <tr th:each="cartItem:${cart.getCartItemList()}">
                        <td>
                            <a th:href="@{'/catalog/viewItem?itemId='+${cartItem.getItem().getItemId()}}" th:text="${cartItem.getItem().getItemId()}"></a>
                        </td>
                        <td th:text="${cartItem.item.product.productId}">
                        </td>
                        <td th:text="${cartItem.item.getAttribute1()+cartItem.item.getAttribute2+
                            cartItem.item.getAttribute3()+cartItem.item.getAttribute4()+cartItem.item.getAttribute5()+
                            cartItem.item.product.getName()}">
                        </td>
                        <td th:if="${cartItem.isInStock() eq 1}">
                            true
                        </td>
                        <td th:if="${cartItem.isInStock() ne 1}">
                            false
                        </td>
                        <td>
                            <select th:id="${cartItem.item.itemId}" th:name="${cartItem.item.itemId}" class="cartSelect">
                            </select>
                            <script th:inline="javascript">
                                /*<![CDATA[*/
                                var select = document.getElementById(/*[[${cartItem.item.itemId}]]*/);
                                for(var i=1;i<=100;i++){
                                    var opt = document.createElement("option");
                                    opt.value=i;
                                    if(i ==/*[[${cartItem.quantity}]]*/){
                                        opt.selected = true;
                                    }
                                    opt.innerHTML=i;
                                    select.appendChild(opt);
                                }
                                /*]]>*/
                            </script>
                        </td>
                        <td th:text="'$'+${#numbers.formatDecimal(cartItem.item.listPrice,1,'COMMA',2,'POINT')}"></td>

                        <td th:id="${cartItem.item.itemId}+'Total'" th:text="${cartItem.total}"></td>
                        <td>
                            <a th:href="@{'removeItemFromCart?workingItemId='+${cartItem.item.itemId}}" class="Button">Remove</a>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="7" id="totalPrice" th:text="'Sub Total:'+${cart.getSubTotal()}"></td>
                        <td>&nbsp;</td>
                    </tr>
                    </div>
                </table>
                <br>
                <tr th:if="${session.loginAccount ne null && session.loginAccount.getCart() ne null}">
                    <a href="/order/newOrderForm" class="Button">Proceed to Checkout</a>
                </tr>
                <script th:src="@{/JS/cart/Cart.js}"></script>
            </div>

            <div id="Separator">&nbsp;</div>
        </div>
    </div>
    <div th:replace="/common/footer.html"></div>
</body>
</html>